Skip to content

frontend: Add Storybook stories for DeleteMultipleButton#4709

Open
mastermaxx03 wants to merge 1 commit intokubernetes-sigs:mainfrom
mastermaxx03:frontend-storybook-delete
Open

frontend: Add Storybook stories for DeleteMultipleButton#4709
mastermaxx03 wants to merge 1 commit intokubernetes-sigs:mainfrom
mastermaxx03:frontend-storybook-delete

Conversation

@mastermaxx03
Copy link
Contributor

@mastermaxx03 mastermaxx03 commented Feb 15, 2026

Summary

This PR adds Storybook stories for the DeleteMultipleButton component by separating the presentational part into a PureDeleteMultipleButton component and adding loading/error UI states in the dialog.

Related Issue

Fixes #4691

Changes

  • Added PureDeleteMultipleButton component for Storybook testability
  • Added loading and error props to show delete progress and error states in dialog
  • Added loading UI (spinner with "Deleting X items..." message)
  • Added error UI (error message display in dialog)
  • Created DeleteMultipleButton.stories.tsx with stories covering:
    • Button disabled with no selection
    • Button enabled with single/multiple items
    • Confirmation dialog (open, mixed types, multi-cluster)
    • Delete progress indicator
    • Error states (network error, permission denied)
    • Button style variants (action, menu)

Steps to Test

  1. Run cd frontend && npm run storybook
  2. Navigate to "Resource/DeleteMultipleButton" in sidebar
  3. Click through each story to verify UI states

Notes for the Reviewer

  • Partial failure error state is not included because current code uses Promise.all which fails entirely if any item fails. To support partial failure, would need to change to Promise.allSettled.
  • Coverage increased from 0% to ~28%

@k8s-ci-robot
Copy link
Contributor

k8s-ci-robot commented Feb 15, 2026

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: mastermaxx03
Once this PR has been reviewed and has the lgtm label, please assign joaquimrocha for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@k8s-ci-robot k8s-ci-robot added size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. labels Feb 15, 2026
@mastermaxx03
Copy link
Contributor Author

mastermaxx03 commented Feb 15, 2026

Hey @illume
I haven't included the partial failure error state story because the current code uses Promise.all, which fails entirely if any item fails - no partial failure actually happens. Adding that story would show a UI state that doesn't exist in the real app. Should I:

  1. Keep it as-is (no partial failure story), or
  2. Change Promise.all to Promise.allSettled to support real partial failures, then add the story?

@mastermaxx03 mastermaxx03 force-pushed the frontend-storybook-delete branch from d3bbdae to 25a54d9 Compare February 15, 2026 08:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ashu8912 ashu8912 Awaiting requested review from ashu8912

@yolossn yolossn Awaiting requested review from yolossn

Assignees

No one assigned

Labels

cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/XXL Denotes a PR that changes 1000+ lines, ignoring generated files.

Projects

None yet

Milestone

No milestone

2 participants

@mastermaxx03 @k8s-ci-robot